<template>
	<div class="main">
		<jm-head ref="head"></jm-head>
		<div class="transfer-content">
			<div class="transfer-head">
			<van-cell>
				<div slot="title" class="transfer-memberinfo">
					<div class="transfer-memberinfo-field">转账用户</div>
					<div class="transfer-memberinfo-value">
						<div class="transfer-member-name">{{$store.state.userInfo.true_name == "" ? $store.state.userInfo.nickname : $store.state.userInfo.true_name}}</div>
						<div class="transfer-member-id">{{$store.state.userInfo.id}}</div>

					</div>
				</div>
			</van-cell>
			</div>
			<div class="transfer-member-gold">可用余额: <span>人民币元 {{$store.state.userInfo.gold}}</span></div>

			<van-cell title="转账金额" border="false"/>
			<van-cell-group>
				 <div class="transfer-gold">
			  <van-field
				v-model="gold"
				size="large"
				placeholder="请输入转账金额"
			  />
			  </div>

			   <van-field
				v-model="agentPhone"
				label="收款人手机号"
				placeholder="请输入收款人手机号"
				right-icon="user-o"
			  />
			   <van-field
				v-model="agentMid"
				label="收款人ID"
				placeholder="请输入收款人ID"
				right-icon="idcard"
			  />
			</van-cell-group>

      <van-cell-group>
        <van-field
      	v-model="sms"
      	center
      	clearable
      	maxlength="6"
      	label="短信验证码"
      	placeholder="请输入短信验证码"
         >
        	<van-button slot="button" size="small" round color="#d3a95a" plain @click="sendcode">{{code_text}}</van-button>
         </van-field>
      </van-cell-group>

      <div style="background-color:white">
        <div class="transfer-button">
          <van-button type="info" size="large" @click="submit">确认</van-button>
        </div>
        <div class="transfer-tips-text">
          <div class="transfer-text">温馨提示：</div>
          <div class="transfer-text">1、只有合伙人具备转账资格，可以开通转账功能；</div>
          <div class="transfer-text">2、转账用户与收款用户，必须为直接或者间接推荐关系，推荐关系必须可以溯源；</div>
          <div class="transfer-text">3、转账用户转账前，务必认真核对收款人手机号和收款人ID号！因个人原因导致错误转账，产生的后果和损失，由转账用户自行承担；</div>
          <div class="transfer-text">4、转账用户必须妥善保管好自己的平台账号和验证码，以确保个人账户的资金安全；</div>
          <div class="transfer-text">5、转账金额最低100元，最高不得超过转账用户的个人账户余额。</div>
        </div>
      </div>

      <van-action-sheet v-model="showPasKey" title="输入支付密码">
          <div class="content_div box">
              <div class="transfer-paypwd-tips">使用转账需要支付密码,用于支付验证</div>
              <van-password-input
              :value="passwordVal"
              :focused="showKey"
              @focus="showKey = true"
              />
              <div class="transfer-forget-paypwd"> <span @click="forgetPayPwd">忘记支付密码</span></div>
              <!-- 数字键盘 -->
              <van-number-keyboard
              :show="showKey"
              @input="onInput"
              @delete="onDelete"
              @blur="showKey = true"
              />

          </div>
      </van-action-sheet>
		</div>


	</div>
</template>

<script>
  import store from '@/store'
  import { transfer } from "@/api/yue";
  import { sendCode } from "@/api/user"
  import JmHead from '../head/head'
	import Vue from 'vue';
  import Vant from 'vant'
	import { NavBar, Cell, CellGroup, Field, Button, Toast, Dialog} from 'vant';

	Vue.use(NavBar).use(Cell).use(CellGroup).use(Field).use(Button).use(Toast).use(Dialog);
  Vue.use(Vant)
	export default{
		name: 'transfer',
    components: {
        JmHead
    },
		data () {
			return {
				gold:'',//转账金额
				agentPhone:'',//收款人手机号
				agentMid:'',//收款人用户ID
        code_text:'获取验证码',
        sms:'',//验证码
        is_send: 1,//是否可以点击发送验证码
        showPasKey: false,
        passwordVal: '',
        showKey: true,
			}
		},
    mounted() {
        let pay_pwd = this.$store.state.userInfo.password_pay
        if(pay_pwd.length <= 0){
          Dialog.alert({
            title: '提示',
            message: '转账需要支付密码，请先设置支付密码，再进行转账操作'
          }).then(() => {
            this.$router.push({path:'/password/pay'})
          });
        }
    },
		activated() {
		    this.$refs.head.setNavBarUrl()
		},
		methods:{
			submit(){
				let that = this
				let regExpGold=/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
				if( !regExpGold.test(that.gold)){
					Dialog.alert({
					  title: '提示',
					  message: '请输入正确的转账金额'
					}).then(() => {
					  // on close
					});
					return
				}
				let bValidate = RegExp(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[1389])\d{8}$/).test(that.agentPhone);
				if (!bValidate) {
				  Toast('请输入有效手机号')
				  return
				}
        that.showPasKey = true;
			},
      transfer(){
          let that = this
          transfer({gold:that.gold,agentPhone:that.agentPhone,agentMid:that.agentMid,payPwd:that.passwordVal,code:that.sms}).then(res => {
              Dialog.alert({
                title: '提示',
                message: res.info+''
              }).then(() => {
                // on close
              });
              that.passwordVal = ''
              if (res.code === 20000) {
                  that.gold = ''
                  that.agentPhone = ''
                  that.agentMid = ''
                  that.sms = ''
                  that.showPasKey = false;
                  that.$router.push({path: '/gold'})
              }
          })
      },
      //忘记密码
      forgetPayPwd(){
        this.$router.push({path:'/password/pay'})
      },
      //删除密码
      onDelete() {
        this.passwordVal = this.passwordVal.slice(0, this.passwordVal.length - 1);
      },
      //密码框内数据
      onInput(key) {
      	let that = this
      	that.passwordVal = (that.passwordVal + key).slice(0, 6);
      	if (that.passwordVal.length >= 6) {
          that.transfer();
      	}
      },
      //发送验证码
      sendcode() {
      	var that = this
          if(that.is_send == 1){
            var is_send = that.is_send;
            if (is_send == 0) {
              return;//不可点击
            }
      	  var phone = that.$store.state.userInfo.phone;
      	  Dialog.alert({
      	    title: '发送短信验证码',
      	    message: '我们将会向您的手机号'+phone+'发送短信验证码进行账号安全验证，收到验证码后请及时输入验证码'
      	  }).then(() => {
      	    //手机号验证
      	    if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[1389])\d{8}$/.test(phone))) {
      	      Toast('您的平台注册手机号码有误');
      	      return false;
      	    }

      	    that.code_text = '正在发送...'
      	    that.is_send = 0//可以点击
      	    that.send_mess(phone);//发送短信 界面变更
      	  });

          }
      },
      //后台发送验证码 同一个手机 一分钟内
      send_mess(phone) {
          var that = this;
          const obj = {
              storeId: that.$store.state.userInfo.store_id,
              phone: phone,
              handlerType: 'transfer'
          }
          sendCode(obj).then(res => {
              if (res.code === 20000) {
                  Toast.success({message: '发送成功', duration: 2000})
                  that.countdown(180);//发送成功 倒计时
              } else {
                  that.code_text = '获取验证码'
                  that.is_send = 1
                  //发送失败 复原
              }
          })
      },
      countdown(time = 180) {
          let that = this
          if (time <= 0) {
            that.code_text = '获取验证码'
            that.is_send = 1
            //终止倒计时
            return;
          }
            that.code_text = time + 's'
            that.is_send = 0
          setTimeout(function () {
            time -= 1;
            that.countdown(time);
          }, 1000);
      }
		}
	}

</script>

<style scoped>
	.main{
		background-color: #edebec;
	}
	.transfer-head{
		padding-top: 10px;
	}
	.transfer-content{
		width: 94%;
		margin: auto;

	}
	.transfer-memberinfo{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.transfer-memberinfo-value{
		flex: 1;
		text-align: right;
		display: inline-block;
	}
	.transfer-member-gold{
		width: 90%;
		margin: auto;
		color: #969799;
		padding: 12px 0;
	}
	.transfer-member-gold span{
		color: rgb(7, 193, 96);
	}
	.transfer-gold{
		margin-bottom: 10px;
	}
	.transfer-button{
		width: 90%;
		margin: auto;
		padding: 30px 0 50px 0;
	}
  .transfer-tips-text{
  	width: 90%;
  	margin: auto;
  	font-size: 14px;
  }
  .transfer-text{
  	padding: 5px 0;
    line-height: normal;
  }
  /* 密码框 */
  .transfer-paypwd-tips{
  	margin: 10px 16px;
  	font-size: 12px;
  	color: #888;
  }
  .transfer-forget-paypwd{
  	font-size: 12px;
  	text-align: right;
  	color: #ff7800;
  	padding:10px 16px 16px 16px;
  }
  .transfer-forget-paypwd span{
  	padding: 10px;
  }
  .content_div{
    padding: .3rem;
    height: 8rem;
  }

</style>
